<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="info-box" v-if="id">
			<view class="info-title">
				{{ name }}
				<text class="dept">{{ dept }}</text>
			</view>
		</view>

		<view class="container">
			<view class="plan-box">
				<view class="pro-row" v-for="(item, index) in planList" :key="item.id">
					<view class="pro-title">{{ item.userId }}</view>
					<view class="pro-block" v-if="type == 'all' || type == 'seat'">
						<view class="left">
							<image src="/static/img/icon_47.png" mode="widthFix"></image>
							座次:
						</view>
						<view class="right"><view v-html="item.seatNo"></view></view>
					</view>
					<view class="pro-block" v-if="type == 'all' || type == 'car'">
						<view class="left">
							<image src="/static/img/icon_50.png" mode="widthFix"></image>
							车辆:
						</view>
						<view class="right">
							<view v-html="item.carNo"></view>
							<view v-html="item.carTime"></view>
						</view>
					</view>
					<view class="pro-block" v-if="type == 'all' || type == 'hotel'">
						<view class="left">
							<image src="/static/img/icon_48.png" mode="widthFix"></image>
							住宿:
						</view>
						<view class="right">
							<view v-html="item.hotelNo"></view>
							<view v-html="item.hotelTime"></view>
						</view>
					</view>
					<view class="pro-block" v-if="type == 'all' || type == 'dinner'">
						<view class="left">
							<image src="/static/img/icon_49.png" mode="widthFix"></image>
							就餐:
						</view>
						<view class="right">
							<view v-html="item.dinnerInfo"></view>
							<view v-html="item.dinnerTime"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			title: '会务安排',
			type: 'all',
			dept: '',
			name: '',
			hyhdMeeting: {},
			planList: []
		};
	},
	onLoad(option) {
		this.type = option.type || 'all';
		this.id = option.id;
		this.name = decodeURI(option.name);
		this.dept = decodeURI(option.dept);
		if (this.type == 'seat') {
			this.title = '座位安排';
		}
		if (this.type == 'hotel') {
			this.title = '住宿安排';
		}
		if (this.type == 'dinner') {
			this.title = '就餐安排';
		}
		if (this.type == 'car') {
			this.title = '车辆安排';
		}

		uni.setNavigationBarTitle({
			title: this.title
		});
		this.loadData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadData() {
			let data = {
				clientCode: this.userInfo.sysUser.clientCode,
				currentUserId: this.userInfo.sysUser.id,
				meetingId: this.id,
				pageNum: 1,
				pageSize: 99999
			};
			this.$request('/huiyihuodong/hyhd-meeting-user/userInfos', data).then(res => {
				this.planList = res.data.records;
			});
		}
	}
};
</script>

<style lang="scss">
.info-box {
	padding: 30rpx 30rpx;

	.info-title {
		margin-bottom: 14rpx;
	}
}

.plan-box {
	margin-top: 30rpx;
}
.pro-row {
	width: 100%;
}
.pro-block {
	margin-top: 30rpx;
	display: flex !important;
	width: 100%;
	align-items: flex-start;
	font-size: 16px;
	.left {
		display: flex;
		align-items: center;
		width: 65px;
		image {
			width: 16px;
			margin-top: 0;
		}
	}
	.right {
		color: #333;
		flex: 1;
		width: 0;
	}
}
</style>
